/**
 * DonReY Control Application
 */
donrey.control = (function() {

	var self = this, observers = [],
	
	$donrey_control, $page_mover, bar_state = 'init', bar_height = 200,
	
	last_added_tab
	;
	
	var notify_Observers = function(event, data) {
		for(var c=0; c < observers.length; c++)
			observers[c].update(event, data);
	},
	setup_Bar = function() {
		
		// setup the control bar ( which becomes a Tabs jUI Widget )
		$donrey_control
			.resizable({
				handles: "s",
				minHeight: 120,
				maxHeight: 600,
				resize: function(event, ui) {
					$(this).css('width','');
					bar_height = ui.size.height;
					$page_mover.css('height', bar_height);
				}
			})
			.tabs({
				cache: true,
				// for dynamically added tabs
				tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Close</span></li>",
				add: function(event, ui) { // autoselect newly added tabs
					last_added_tab = ui.index;
					$(this).tabs('select', last_added_tab);
				},
				ajaxOptions: {
					error: function( xhr, status, index, anchor ) {
						$( anchor.hash ).html("Error 404");
					}
				}
			})
			.removeClass('ui-corner-all')
			.find( ".ui-tabs-nav" )
				.removeClass('ui-corner-all')
				.sortable({
					axis: "x",
					distance: 5,
					cancel: "span",
					containment: "parent"
				});
		// the tab close button
		$('#donrey-control').on( "click", "span.ui-icon-close", function() {
			var index = $( "li", $donrey_control ).index( $(this).parent() );
			$donrey_control.tabs( "remove", index );
			notify_Observers('tab-close', index);
		});		

	},
	show_Bar = function() {
		$donrey_control.animate({
			'height': bar_height
		}, 1000);
		$page_mover.animate({
			'height': bar_height
		}, 1000);
	},
	hide_Bar = function() {
		$donrey_control.animate({
			'height': 0
		}, 350);
		$page_mover.animate({
			'height': 0
		}, 350);
	}
	;
	
	return {
		add_Tab: function(url, label) {
			$donrey_control.tabs('add', url, label);
			return last_added_tab;
		},
		select_Tab: function(index) {
			$donrey_control.tabs('select', index);
		},
		init: function() {
//			donrey.load_CSS("/dryfe/js/lib/jquery/jquery-ui/smoothness/smoothness.css");
			donrey.load_CSS("/dryfe/css/donrey-control.css");
			
			// load some Jquery Plugins that are necessary for this bar:
			donrey.LAB.script("/dryfe/js/lib/jquery/jquery-form/jquery.form.min.js");
			
			// Create the Control Bar Toggle button and it's actions (click)
			$('body').prepend($("<div id='control-bar-toggle' class='ui-icon ui-icon-circle-arrow-s'></div>")
				.click(function() {
					switch(bar_state) {
					case 'init':
						// create an empty div which will push the rest of the content along with the donrey-control bar
						$page_mover = $("<div></div>").css('position', 'relative').prependTo('body');
						// create the control bar at first use
						$donrey_control = $("<div id='donrey-control'></div>").load('/control?cmd=Load_Control', setup_Bar).prependTo('body');
					case 'closed':
						// show the bar
						show_Bar();
						$(this).removeClass('ui-icon-circle-arrow-s').addClass('ui-icon-circle-close');
						bar_state = 'open';
						break;
					case 'open':
						// hide the bar
						hide_Bar();
						$(this).removeClass('ui-icon-circle-close').addClass('ui-icon-circle-arrow-s');
						bar_state = 'closed';
					}
				})
			);
			
		},
		// observer pattern ( for closing tabs )
		attach_Observer: function(observer) {
			observers.push(observer);
		}
	};
}());